<html>
<head>
    <meta charset="utf-8"/>
    <script src="./js/echarts.js"></script>
    <script src="./js/lodash.min.js"></script>
</head>
<body>
<h1>
    eve 物价统计
</h1>
<div>

    <div id="fuel" style="width: 100%;height:400px;">


    </div>
</div>

<script>

    var priceDataList = [
        {
            'day': '07-15',
            "重水": 80,
            "液化臭氧": 520,
            "离子溶液": 1450,
            "同位素燃料": 4790,
            "等离子团": 10799
        },
        {
            'day': '08-15',
            "重水": 81,
            "液化臭氧": 621,
            "离子溶液": 1750,
            "同位素燃料": 4790,
            "等离子团": 10234
        }
    ]

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '燃料价格统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['重水', '液化臭氧', '离子溶液', '同位素燃料', '等离子团']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            //data: ['07-15', '08-15', '09-15']
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: []
    };

    function updateData(priceDataList) {
        var dayList = []
        var seriesList = []
        //     [
        //     {
        //         name: '重水',
        //         type: 'line',
        //         data: []
        //     },
        //     {
        //         name: '液化臭氧',
        //         type: 'line',
        //         data: []
        //     },
        //     {
        //         name: '离子溶液',
        //         type: 'line',
        //         data: []
        //     },
        //     {
        //         name: '同位素燃料',
        //         type: 'line',
        //         data: []
        //     },
        //     {
        //         name: '等离子团',
        //         type: 'line',
        //         data: []
        //     }
        // ]
        var tmpData = {}
        _.forEach(priceDataList, function (priceData) {
            dayList.push(priceData.day)
            for (item in priceData) {
                console.log('item', item)
                if (item === 'day') {
                    continue;
                }
                if (typeof tmpData[item] === 'undefined') {
                    tmpData[item] = []
                }
                tmpData[item].push(priceData[item])
            }
        })

        _.forEach(tmpData, function(v, k) {
            seriesList.push({
                name: k,
                type: 'line',
                data: v
            })
        })
        // console.log('tmpData', tmpData)
        option.xAxis.data = dayList
        option.series = seriesList
        // console.log('seriesList', seriesList)
    }
    updateData(priceDataList)
    // 使用刚指定的配置项和数据显示图表。
    var fuelChart = echarts.init(document.getElementById('fuel'))
    fuelChart.setOption(option);

    window.addEventListener('resize', function (){
        fuelChart.resize()
    })
</script>
</body>
</html>